<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <div class="head">
      <span class="title">{{ deptName }}-{{ year }}年用电统计</span>
      <el-tag type="success">合计部门：{{ allNum }}家</el-tag>
      <el-tag type="success" size="medium">计量单位：kwh</el-tag>
      <el-button @click="goBack" size="small">返回</el-button>
    </div>
    <el-table
      border
      height="700"
      v-loading="loading"
      :data="dataList"
      row-key="deptId"
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="deptName"
        label="部门名称"
        min-width="200"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="day1"
        label="1日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <!-- <template slot-scope="scope">
          <div>{{ scope.row.energyElectricity | numDealfilters }}</div>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="day2"
        label="2日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day3"
        label="3日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day4"
        label="4日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day5"
        label="5日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day6"
        label="6日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day7"
        label="7日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day8"
        label="8日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day9"
        label="9日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day10"
        label="10日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day11"
        label="11日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day12"
        label="12日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day13"
        label="13日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day14"
        label="14日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day15"
        label="15日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day16"
        label="16日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day17"
        label="17日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day18"
        label="18日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day19"
        label="19日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day20"
        label="20日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day21"
        label="21日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day22"
        label="22日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day23"
        label="23日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day24"
        label="24日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day25"
        label="25日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day26"
        label="26日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day27"
        label="27日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day28"
        label="28日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day29"
        label="29日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day30"
        label="30日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="day31"
        label="31日"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
      </el-table-column>
    </el-table>
  </lb-layout>
</template>

<script>
import { getDeptUsedElectricityDay } from "@/api/electricity/index.js";
import { deepClone, dealElectricity } from "@/utils/index";
export default {
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      isExpandAll: true,
      dataList: [],
      backMenu: "",
      deptId: null,
      year: "",
      month: "",
      deptName: "",
      allNum: 0,
    };
  },
  created() {},
  mounted() {
    this.judgeRoute();
  },
  filters: {
    numDealfilters(num) {
      let result;
      let num1;
      if (typeof num == "string") {
        num1 = Number(num);
      } else {
        num1 = num;
      }
      result = dealElectricity(num1, 1, 2);
      return result;
    },
  },
  methods: {
    judgeRoute() {
      let route = this.$route;
      this.backMenu = route.meta.activeMenu;
      this.deptId = route.query.deptId;
      this.year = route.query.year;
      this.month = route.query.month;
      this.deptName = route.query.deptName;
      this.initData();
      // this.getNum();
    },
    goBack() {
      // this.$router.push({
      //   path: this.backMenu,
      //   query: {},
      // });
      this.$router.go(-1);
    },
    initData() {
      let query = {
        deptId: this.deptId,
        year: this.year,
        month: this.month,
      };
      getDeptUsedElectricityDay(query)
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let allEle = res?.data ?? {};
          this.allNum = allEle?.deptNum ?? 0;
          this.dataList = [allEle];
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  position: relative;
  .title {
    font-size: 28px;
    font-weight: 400;
  }
  .el-tag {
    margin-left: 20px;
  }
  .el-button {
    position: absolute;
    right: 0px;
  }
}
</style>
